<?php
$this->title = '充值';
$per_url = Yii::$app->params['imgurl'];
$setting = Yii::$app->setting;
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title><?=$setting->get('site_title')?></title>
    <meta name="keywords" content="<?=$setting->get('site_keyword')?>">
    <meta name="Description" content="<?=$setting->get('site_description')?>">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        body{background-color: #F5F5F5 !important;margin:0px;padding:0px;}
        .myheader a{color:#333;}
        .zhanwei{width:100%;height:45px;}

        .box_top_up_list {
            overflow: hidden;
            margin: 0;
            padding:15px;
            border: 0;
            color: #333333;
            font-size: 14px;
            list-style: none;
        }
        .box_top_up_list li:nth-child(2n-1) {
            padding-right: 15px;
        }
        .box_top_up_list li{
            float: left;
            width: 50%;
            margin-bottom: 10px;
        }
        .box_top_up_list li div {
            background-color: #FFFFFF;
            border-radius: 7px;
            text-align: center;
            padding: 25px 0;
            position: relative;
            overflow: hidden;
        }
        .box_top_up_list .left_posi {
            width: 100%;
            line-height: 20px;
            background-color: #FC695D;
            color: #FFFFFF;
            position: absolute;
            top: 13%;
            right: -35%;
            padding: 0;
            font-size: 10px;
            transform: rotate(45deg);
            text-align: center;
        }
        .box_top_up_btm {
            padding: 0 38px 20px;
        }
        .box_top_up_btm p:nth-child(1) {
            text-indent: 0;
        }
        .box_top_up_btm p {
            color: #999999;
            font-size: 10px;
            text-indent: 2em;
            line-height: 20px;
            margin-bottom: 0px;
        }

        .top_up_mask {
            position: absolute;
            z-index: 99;
            background-color: rgba(000,000,000,0.5);
            width: 100%;
            height: 100%;
            bottom: 0;
            left: 0;
            display: none;
        }
        .top_up_mask_content {
            position: absolute;
            z-index: 999;
            background-color: #FFFFFF;
            width: 100%;
            bottom: 0;
            left: 0;
            padding: 0 15px 37px;
        }
        .top_up_mask_top {
            text-align: center;
            line-height: 45px;
            font-size: 15px;
            overflow: hidden;
        }
        .top_up_mask_top span {
            position: absolute;
            top:0px;
            right:0px;
            font-size: 40px;
        }
        .top_up_mask_num_top {
            text-align: center;
            font-size: 14px;
            line-height: 14px;
            padding-top: 16px;
            color: #333333;
        }
        .top_up_mask b {
            font-weight: 500;
        }
        .top_up_mask_num_btm {
            text-align: center;
            font-size: 30px;
            line-height: 30px;
            padding-top: 15px;
            padding-bottom: 22px;
            position: relative;
            margin: 0;
            border: 0;
            color: #333333;
        }
        .top_up_mask_list {
            padding: 7px 0;
        }
        .top_up_mask_list li {
            overflow: hidden;
            line-height: 40px;
            border-bottom: 1px solid #eee;
        }
        .top_up_mask_list li span {
            float: left;
            font-size: 13px;
        }
        .top_up_mask_btm a {
            display: block;
            line-height: 45px;
            background-color: #FB655C;
            color: #FFFFFF;
            font-size: 14px;
            text-align: center;
            border-radius: 7px;
        }
        .top_up_mask_list li:last-child {
            margin-bottom: 21px;
        }
        .payway-list .payway-active b {
            background: green;
            border-color: green;
        }
        .top_up_mask_list li p {
            float: right;
        }
        .payway {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 1px solid #ccc;
        }
        .payway-list li img {
            width: 20px;
            height: 20px;
            float: left;
            padding-right: 10px;
            padding-top: 10px;
            box-sizing: content-box;
        }
    </style>
    <!--    css-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/mui/3.7.1/css/mui.min.css">
    <link href="https://cdn.bootcss.com/layer/2.3/skin/layer.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="page-rechange">
    <header id="myheader" class="mui-bar mui-bar-nav">
        <a href="javascript:history.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #333;"></a>
        <a href="/touch/default/index" class="mui-icon mui-action-menu mui-icon-home mui-pull-right" style="color: #333;"></a>
        <h1 class="mui-title"><?=$this->title?></h1>
    </header>
    <div class="zhanwei"></div>
    <div class="sec-one">
        <!--点击支付  弹出层-->
        <div class="top_up_mask">
            <div class="top_up_mask_content">
                <div class="top_up_mask_top">
                    <span class="mui-icon mui-icon-closeempty" id="close"></span>
                    <b>选择支付方式</b>
                </div>
                <div class="top_up_mask_num">
                    <p class="top_up_mask_num_top" id="desc"><?=$model->subject?></p>
                    <p class="top_up_mask_num_btm">
                        <b style="margin-right: 8px;">&yen;</b><span id="price"><?=$model->total_amount?></span>
                    </p>
                </div>
                <ul class="top_up_mask_list payway-list">
                    <!--                    <li data-payway='wxpay' class="payway-active">-->
                    <!--                        <img src="/Public/images/wxpay.png" >-->
                    <!--                        <span>微信支付</span>-->
                    <!--                        <p>-->
                    <!--                            <b class="payway"></b>-->
                    <!--                        </p>-->
                    <!--                    </li>-->
                    <li data-payway='alipay' class="payway-active">
                        <img src="/img/alipay.png" >
                        <span>支付宝支付</span>
                        <p>
                            <b class="payway"></b>
                        </p>
                    </li>
                </ul>
                <div class="top_up_mask_btm">
                    <a href="javascript:pay();">确认支付</a>
                </div>
            </div>
        </div>


    </div>
</div>

</body>
</html>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<script>
    $("#close").on('click', function(){
        $(".top_up_mask").hide();
    });
    $(".top_up_mask").show(500);
    function pay(){
        // 关闭支付方式选择层
        $(".top_up_mask").hide();
        window.location.href = "/touch/order/alipay?sn=<?=$model->out_trade_no?>";
    }

</script>

